<template>
    <view>
        <u-popup :show="ruleShow" mode="center" overlayOpacity=".9"bgColor="transparent">
            <view class="tanchuang_box" style="background-image: url('https://morgan.dingxians.cn/static/yfs/xqtc.png');">
                <view class="close_guanbi_box" @click="hidePopup"
                    style="background-image: url('https://morgan.dingxians.cn/static/recordDrwa/3.png');">
                </view>
                <view class="dengji_box">{{ spDetailObj.level_id_name }}</view>
                <view class="tupian_box">
                    <image :src="spDetailObj.image" mode="scaleToFill" />
                </view>
                <view class="name_box">{{ spDetailObj.title }}</view>
                <view class="xiangqingname_box" style="background-image: url('https://morgan.dingxians.cn/static/yfs/xqmingzi.png');">价值：{{jiaprice}}元素</view>
            </view>
        </u-popup>

    </view>
</template>
<script>
export default {
    props: {
        ruleShow: {
            type: Boolean,
            default: false,
        },
        spDetailObj: {
            type: Object,
            default: {},
        },
        jiaprice:{
            type:[String,Number],
            default:0
        }
    },
    methods: {
        hidePopup() {
            this.$emit('handlePopup')
        }
    }
}
</script>
<style lang="scss" scoped>
.tanchuang_box {
    width: 580rpx;
    height: 700rpx;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-top: 29rpx;
    position: relative;

    .title_box {
        width: 402rpx;
        height: 66rpx;
        margin: auto;
        background-size: 100% 100%;
        margin-bottom: 40rpx;
    }

    .close_guanbi_box {
        width: 60rpx;
        height: 60rpx;
        background-size: 100% 100%;
        position: absolute;
        top: 36rpx;
        right: 20rpx;
    }

    .dengji_box {
        position: absolute;
        height: 26rpx;
        font-family: text1;
        font-weight: bold;
        font-size: 28rpx;
        color: #FFEDD7;
        line-height: 18rpx;
        top: 174rpx;
        left: 161rpx;
        z-index: 6;
    }

    .tupian_box {
        position: absolute;
    width: 286rpx;
    height: 339rpx;
    left: 0;
    right: 0;
    top: 147rpx;
    margin: auto;
        // background-color: #fff;

        image {
            height: 100%;
            width: 100%;
        }
    }

    .name_box {
        position: absolute;
        top: 499rpx;
        left: 0;
        right: 0;
        margin: auto;
        width: 252rpx;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #FFFFFF;
        line-height: 40rpx;
        text-align: center;
    }

    .xiangqingname_box {
        position: absolute;
        top: 561rpx;
        left: 0;
        right: 0;
        margin: auto;
        width: 447rpx;
        height: 100rpx;
        font-family: text1;
        font-weight: bold;
        text-align: center;
        background-size: 100% 100%;
        font-size: 28rpx;
        color: #FFEDD7;
        line-height: 100rpx;
    }
    .gailv{
        width: 100%;
        height: 50rpx;
        color: #fff;
        text-align: center;
        font-size: 22rpx;
    }
}
</style>